<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>文件上传</title>
</head>
<body>
<h1>文件上传示例</h1>

<h2>单文件上传 (方法1)</h2>
<form id="singleForm1" enctype="multipart/form-data">
    <input type="file" name="file" required>
    <button type="submit">上传</button>
</form>
<div id="singleResult1"></div>

<h2>单文件上传 (方法2)</h2>
<form id="singleForm2" enctype="multipart/form-data">
    <input type="file" name="file" required>
    <button type="submit">上传</button>
</form>
<div id="singleResult2"></div>

<h2>多文件上传 (方法1)</h2>
<form id="multipleForm1" enctype="multipart/form-data">
    <input type="file" name="files" multiple required>
    <button type="submit">上传</button>
</form>
<div id="multipleResult1"></div>

<h2>多文件上传 (方法2)</h2>
<form id="multipleForm2" enctype="multipart/form-data">
    <input type="file" name="files" multiple required>
    <button type="submit">上传</button>
</form>
<div id="multipleResult2"></div>

<script>
    // 单文件上传1
    document.getElementById('singleForm1').addEventListener('submit', function(e) {
        e.preventDefault();
        const formData = new FormData(this);
        uploadFile(formData, '/api/upload/single1', 'singleResult1');
    });

    // 单文件上传2
    document.getElementById('singleForm2').addEventListener('submit', function(e) {
        e.preventDefault();
        const formData = new FormData(this);
        uploadFile(formData, '/api/upload/single2', 'singleResult2');
    });

    // 多文件上传1
    document.getElementById('multipleForm1').addEventListener('submit', function(e) {
        e.preventDefault();
        const formData = new FormData(this);
        uploadFile(formData, '/api/upload/multiple1', 'multipleResult1');
    });

    // 多文件上传2
    document.getElementById('multipleForm2').addEventListener('submit', function(e) {
        e.preventDefault();
        const formData = new FormData(this);
        uploadFile(formData, '/api/upload/multiple2', 'multipleResult2');
    });

    // 通用上传函数
    function uploadFile(formData, url, resultId) {
        const resultElement = document.getElementById(resultId);
        resultElement.textContent = '上传中...';

        fetch(url, {
            method: 'POST',
            body: formData
        })
        .then(response => {
            if (!response.ok) {
                return response.text().then(text => { throw new Error(text); });
            }
            return response.json().catch(() => response.text());
        })
        .then(data => {
            resultElement.textContent = '';
            // 处理多文件上传结果
            if (typeof data === 'object' && data.successfullyUploaded) {
                const successList = document.createElement('ul');
                successList.innerHTML = '<strong>上传成功:</strong>';
                data.successfullyUploaded.forEach(file => {
                    const li = document.createElement('li');
                    li.textContent = file;
                    successList.appendChild(li);
                });
                resultElement.appendChild(successList);

                if (data.errors && data.errors.length > 0) {
                    const errorList = document.createElement('ul');
                    errorList.innerHTML = '<strong>错误:</strong>';
                    data.errors.forEach(error => {
                        const li = document.createElement('li');
                        li.textContent = error;
                        errorList.appendChild(li);
                    });
                    resultElement.appendChild(errorList);
                }
            } else {
                // 单文件上传结果
                resultElement.textContent = data;
            }
        })
        .catch(error => {
            resultElement.textContent = '错误: ' + error.message;
        });
    }
</script>
</body>
</html>